.g-switch {
  position: relative;
  width: 124px;
  height: 64px;
  display: inline-block;
  margin-left: 24px;
  background-color: #fff;
  border-radius: 64px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  transition: all 1s;
}

.g-switch__node-box {
  position: absolute;
  top: 2px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  transition: all 1s;
  color: transparent;
}

.g-switch__node {
  left: 2px;
  box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
}

.g-switch__node--checked {
  transform: translateX(64px);
}

.g-switch--checked {
  background-color: #1989fa;
}

.g-switch-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.g-switch-disabled .g-switch__node-box {
  opacity: 1;
}


